<template>
  <div>
    <div  v-bind:style="{width:screenWidth,height:screenHeight }">
      <img  v-bind:style="{width:screenWidth,height:screenHeight }" src="./background.jpg" />
    </div>

    <a-modal v-model:visible="visible" width="1000px" :maskClosable="false" :closable="false">
      <p><b>尊敬的用户：<br>
        您好！非常感谢您对本系统的大力支持！<br>
        本系统由汽车事业群/产品规划及汽车新技术研究院负责设计、开发、维护、管理等技术层面工作。<br><br>

        若您需开通账户或密码错误问题，可联系规划院OTA相关开发人员：
        <br><br>
      </b></p>
      <div style="display: flex;justify-content: center;align-items: center;">
        <a-table
          :columns="bodyColumns"
          :data-source="dataSource"
          :row-key="dataSource.id"
          style="width: 700px"
          :pagination="false"
        >

        </a-table>
      </div>

      <template #title>
        <div>
          <div  style="background-color: #13c2c2;width: 100px" >
            <i class="iconfont icon-mail" style="margin-left: 5px;color: white;"></i>
            <span style="margin-left: 2px; color: white;">联系我们</span>
          </div>
        </div>
      </template>
      <template #footer>
        <a-button @click="handleCancel" type="primary">确定</a-button>
      </template>
    </a-modal>
  </div>


</template>

<script>

  import {ACCESS_TOKEN} from "@/store/mutationTypes";

  export default {
    data(){
      return {
        screenWidth: document.body.clientWidth+'px',
        screenHeight: document.body.clientHeight+'px',
        visible:true,
        bodyColumns: [
          {
            title: '职责',
            dataIndex: 'role',
            width: '20%',
            align: 'center'
          },
          {
            title: '联系人',
            dataIndex: 'name',
            width: '20%',
            align: 'center'
          },
          {
            title: '电话',
            dataIndex: 'phone',
            width: '20%',
            align: 'center'
          },
          {
            title: '邮箱',
            dataIndex: 'email',
            width: '20%',
            align: 'center'
          }
        ],
        dataSource: [
          {id: 1, name: '司媛丽', role: '项目经理', email: 'si.yuanli@byd.com', phone: '18681508720'},
          {id: 2, name: '鞠凤州', role: '软件管控', email: 'ju.fengzhou@byd.com', phone: '18588301050'},
          {id: 3, name: '朱奇进', role: 'OTA测试任务', email: 'zhu.qijin@byd.com', phone: '13632855164'},
          {id: 4, name: '姜宇', role: '账号申请', email: 'jiang.yu11@byd.com', phone: '19868275658'},
        ]
      }
    },
    methods:{
      handleCancel:()=>{
        if (process.env.NODE_ENV === 'development'){
          location.href = location.origin + '#/user/login?redirect=' + this.$route.fullPath
        }else {
          /*const token = sessionStorage.getItem(ACCESS_TOKEN)
          if (token) {
            sessionStorage.removeItem(ACCESS_TOKEN)
          }*/
          sessionStorage.clear();
          //TODO 配置化
          window.top.location.href = process.env.VUE_APP_SSO_BASE_URL+"/idp/authCenter/GLO?redirectToLogin=true&redirectToUrl="+process.env.VUE_APP_HOME_BASE_URL
        }
        window.top.location.reload()
      }
    }
  }
</script>

<style lang="less" scoped>
  .ant-table-thead > tr >th{
    color:white !important;
    background: black !important;
    text-align: center;
  }
  .ant-modal-footer {
    text-align: center !important;
  }

</style>
